<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
            <div class="card-header">
                <span>权限列表</span>
            </div>
        </template>
        <el-table :data="rights" size="default" :border="true" stripe v-loading="isShowLoading">
            <template #empty>
                <el-empty description="暂无数据" />
            </template>
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column label="权限名称" prop="authName"></el-table-column>
            <el-table-column label="权限路径" prop="path"></el-table-column>
            <el-table-column label="权限等级" prop="level" #="{ row }">
                <el-tag effect="dark" v-if="row.level==0">一级</el-tag>
                <el-tag type="success" effect="dark" v-else-if="row.level==1">二级</el-tag>
                <el-tag type="warning" effect="dark" v-else>三级</el-tag>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup>
import { ref } from 'vue';
import { printLog } from "@/util";
import rightsApi from "@/api/rights.js";

let rights = ref([])
let isShowLoading = ref(false)

const initRightsList = async function () {
    try {
        isShowLoading.value = true;
        let result = await rightsApi.loadAllRights()
        rights.value = result.sort((itemA,itemB)=>itemA.level-itemB.level);
    } catch (error) {
        printLog(error)
    } finally {
        isShowLoading.value = false;
    }
}
initRightsList()
</script>

<style lang="scss" scoped>
.input-btns {
    margin-bottom: 20px;

    .el-input {
        display: inline-flex;
        width: 400px;
        margin-right: 20px;
    }
}

.el-card :deep(.el-card__body) {
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
}

.el-pagination {
    justify-content: center;
    margin-top: 20px;
}

.tip {
    display: inline-block;
    margin: 0px 12px;
}
</style>